<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>360Upload</title>

    <link rel="stylesheet" href="css/fullpage.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">

</head>

<body>
    <nav>
        <div class="nav-box">
            <img class="fl" src="./images/logo.png" alt="logo">
            <div class="nav-t fr">
                <a href="#">论坛</a>
                <a href="#">扩展</a>
                <a href="#">Mac版</a>
            </div>
        </div>
    </nav>
    <div id="fullpage">
        <div class="section section1">
            <div class="title-box">
                <p>畅快浏览 极致体验</p>
                <a href="#"></a>
            </div>
            <img src="images/ball1.png" alt="" class="ball1">
            <img src="images/ball2.png" alt="" class="ball2">
            <img src="images/ship.png" alt="" class="ship">

        </div>
        <div class="section">
            <video autoplay loop muted>
                <source src="https://s2.ssl.qhres.com/static/dfeefadde568eab0.mp4" type="video/mp4">
            </video>
            <div class="word-box">
                <p>极速</p>
                <div class="line"></div>
                <p class="normal">Chromium78全新内核</p>
                <p>性能强劲,快如闪电。</p>
                <div></div>
            </div>
        </div>
        <div class="section">
            <video autoplay loop muted>
                <source src="https://s3.ssl.qhres.com/static/9bebcedf292f327e.mp4" type="video/mp4">
            </video>
            <div class="word-box">
                <p>极酷</p>
                <div class="line"></div>
                <p class="normal">暗夜炫黑模式</p>
                <p>定义酷，定义你。</p>
                <div></div>
            </div>
        </div>
        <div class="section">
            <video autoplay loop muted>
                <source src="https://s1.ssl.qhres.com/static/fdf92889c539303c.mp4" type="video/mp4">
            </video>
            <div class="word-box">
                <p>极安全</p>
                <div class="line"></div>
                <p class="normal">Dns加密防劫持</p>
                <p>安全升级，肆意无忌。</p>
                <div></div>
            </div>
        </div>
        <div class="section">
            <video autoplay loop muted>
                <source src="https://s1.ssl.qhres.com/static/7e7f0ec4a0cc7a66.mp4" type="video/mp4">
            </video>
            <div class="word-box">
                <p>极视界</p>
                <div class="line"></div>
                <p class="normal">4K高清视频播放</p>
                <p>还原真实之美，尽显万物本身。</p>
                <div></div>
            </div>
            <footer>
                Copyright © 2005-2020 360.CN All Rights Reserved 360互联网安全中心
                <br> <img src="images/logo.png" alt=""> 
                京公网安备 11000002000006号 丨 隐私权政策 京ICP证080047号
            </footer>
        </div>
    </div>

    <script src="js/jquery-3.5.0.js"></script>
    <script src="js/fullpage.js"></script>
    <script>
        $(function () {
            $('#fullpage').fullpage({
                'navigation': true,
                afterLoad: function () {
                   $(this).find(".word-box").fadeIn()
                },
                onLeave: function () {
                    $(this).find('.word-box').fadeOut();
                },

            });
        });
    </script>

</body>

</html>